<template>
	<view class="left">
		<image class="logo" src="https://img.wilmer.com.cn/admin/2024/6-13/1212%402x.png" mode=""></image>
		<!-- 目录 -->
		<view class="catalogue">
			<view class="item" v-for="(item,index) in list" :key="index" :class="{special: Dataindex == index}"
				@click="onclick(item)">
				<image :src="Dataindex == index ? item.chooseurl : item.url" mode=""></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<!-- <view class="setup">
			<image src="https://img.wilmer.com.cn/admin/2024/6-9/%E8%AE%BE%E7%BD%AE.png" mode=""></image>
			<text>设置</text>
		</view> -->
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs
	} from "vue"
	import {
		debounce
	} from "@/utils/handleDebounce";
	const data = reactive({
		list: [{
			url: "https://img.wilmer.com.cn/admin/2024/6-9/%E7%BC%96%E7%BB%84%202%402x%20%281%29.png",
			chooseurl: 'https://img.wilmer.com.cn/admin/2024/6-9/%E7%BC%96%E7%BB%84%202%402x.png',
			text: '笔记',
			page: '/pages/index/main'
		}, {
			url: "https://img.wilmer.com.cn/admin/2024/6-9/ricgebf%402x.png",
			chooseurl: 'https://img.wilmer.com.cn/admin/2024/4-29/%E7%BC%96%E7%BB%84%203%402x.png',
			text: '日程',
			page: '/pages/index/schedule'
		}, {
			url: "https://img.wilmer.com.cn/admin/2024/6-9/%E9%A2%98%E5%BA%93%402x.png",
			chooseurl: 'https://img.wilmer.com.cn/admin/2024/6-9/%E7%BC%96%E7%BB%84%204%402x.png',
			text: '题库',
			page: '/pages/index/subject'
		}, {
			url: "https://img.wilmer.com.cn/admin/2024/6-9/%E9%94%99%E9%A2%98%E6%9C%AC%402x.png",
			chooseurl: 'https://img.wilmer.com.cn/admin/2024/6-9/%E7%BC%96%E7%BB%84%205%402x.png',
			text: '错题本',
			page: '/pages/index/WrongBook'
		}, {
			url: "https://img.wilmer.com.cn/admin/2024/6-9/Wilmer%20Albus%402x.png",
			chooseurl: '',
			text: 'Wilmer Albus',
			page: '/pages/index/wilmerbus'
		}]
	});
	const {
		list
	} = toRefs(data);

	const onclick = debounce(
		(item) => {
			uni.switchTab({
				url: item.page,
				success: res => {
					uni.hideTabBar()
				}
			})
		}, 500);

	//接收父组件传过来的值,需要注意defineProps只能在setup语法糖里面使用，不需要import引入
	const props = defineProps({
		Dataindex: {
			type: Number, //类型字符串
			default: 0, //如果没有传递msg参数,默认值是这个
			required: true, //是否必须传递
		}
	})
</script>

<style lang="scss" scoped>
	.left {
		width: 300px;
		height: calc(100vh - 60px);
		background: #FFFFFF;
		box-shadow: 0px 6px 58px 0px rgba(124, 124, 124, 0.1);
		border-radius: 12px;
		padding-top: 32px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			width: 163px;
			height: 51px;
			margin-bottom: 70px;
		}

		.catalogue {
			.item {
				width: 276px;
				height: 72px;
				border-radius: 16px;
				margin-left: 18px;
				display: flex;
				align-items: center;
				margin-top: 10px;

				image {
					width: 32px;
					height: 32px;
					margin-left: 14px;
					margin-right: 36px;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24px;
					color: #787774;
					line-height: 33px;
				}
			}

			.special {
				background: #787774;

				text {
					color: #FFFFFF;
				}
			}
		}

		.setup {
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 64px;

			image {
				width: 32px;
				height: 32px;
			}

			text {
				margin-left: 16px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24px;
				color: #787774;
				line-height: 33px;
			}
		}
	}
</style>